import React, { useState, useEffect } from 'react'; 
import { useHistory } from "react-router-dom";
import http from '../../../../model/http';
import code from "../../../../model/code";
import './billingPageSuccess.less';
import '../../../../libs/font/iconfont.css'
import imgUrl from '../../../../libs/img/user/successImg.png'
import qrCode from '../../../../libs/img/user/qrCode.png'

import {  Button, List, Picker, Toast, InputItem, Modal } from 'antd-mobile';
import Header from '../../../../components/header/Header'
import Qrcode from '../../../medicalElectron/qrcode/qrcode';



function BillingPageSuccess (){
    const history = useHistory();
    const userData = history.location.state;

    const [oldPrice,setOldPrice] = useState(0) 

    const [userDeatil, setUserDetail] = useState([])

    // 过来的类型
    const [historyCome, setHistoryCome] = useState(false)

    useEffect(async () => {
        
        
        


        let userD = sessionStorage.getItem('userInfoDetail') ? JSON.parse(sessionStorage.getItem('userInfoDetail')) : []
        setUserDetail(userD)
        

        console.log(userData.comeType)
        if(userData.comeType != undefined && userData.comeType == 'cardCharging'){
            console.log("执行")
            setHistoryCome(true)
        }else{
            let priceNum = 0
            // 项目原价
            userData.projectData.map((item,index) => {
                
                priceNum = priceNum + Number(item.price!=undefined?Number(item.price !=''?item.price:0):Number(item.original_price!=''?item.original_price:0)) 
               
            })  
           
            setOldPrice(priceNum)
        }

        

    },[])


    const goClickFunc = () => {
        history.push('/billing')
    }

    const transferFunc = async ()=>{
        // window.wx.invoke(
        //     "shareWechatMessage", {
        //             title: 'Qrcode', // 分享标题
        //             desc: '您的支付码', // 分享描述
        //             link: 'http://www.baidu.com', // 分享链接
        //             imgUrl: qrCode // 分享封面
        // }, function(res) {
        //     console.log("分享",res)
        //     if (res.err_msg == "shareWechatMessage:ok") {
        //     }
        // }
        // );
        
        await code.shareContext(userData.shareUrl)

        //   Toast.info("即将上线!")
   

    }

    const showhtml = (htmlString) => {
        var html = { __html: htmlString };
        return <div dangerouslySetInnerHTML={html}></div>;
    }

    return (
        <div className="v-billing-page-success">
            <div className="success-header-box">
                <div className="box">
                    <div className="left">
                        <img src={imgUrl}/>
                    </div>
                    <div className="right">
                        <h1>开单成功！</h1>
                        <p>{showhtml(userData.msg)}</p>
                    </div>
                </div>
            </div>

            <div className="success-content">
                <div className="content-card">
                    <div className="content-box" style={{borderBottom:'1px dotted #f2f4f7',padding:'15px 0',marginBottom:'10px'}}>
                        <span>顾客：<p>{userDeatil.customerName}</p></span>
                        <span>手机号：<p>{userDeatil.tel}</p></span>
                    </div>

                    {historyCome == false ?
                    
                        <div>
                            <div className="content-box" style={{display:'block'}}>
                                <h5><h3>开单项目：</h3><div>
                                    {userData.projectData.map((item,index) => (
                                        <p>{index+1}、{item.name}</p>
                                    ))} 
                                </div></h5> 
                            </div>
                            
                            <div className="content-box">
                                {/* <span>项目原价：<p>{oldPrice}元</p></span> */}
                                <span>报价：<p>{userData.data.sum_baojia}元</p></span> 
                            </div>
                            <div className="content-box">
                                <span>使用积分：<p>{userData.data.sum_use_points}元</p></span>
                                <span>最终价格：<p>{userData.data.real_need_pay_money}元</p></span> 
                            </div>
                        </div>
                    :
                        <div>
                            <div className="content-box" style={{display:'block'}}>
                                <h5><h3>预存款金额：</h3><div> 
                                    <p>{userData.money}元</p> 
                                </div></h5> 
                            </div>
                            <div className="content-box" style={{display:'block'}}>
                                <h5><h3>开单时间：</h3><div> 
                                    <p>{userData.kdtime}</p> 
                                </div></h5> 
                            </div>
                        </div>
                    
                    }
                                         
                </div>
                <div className='imgBox' style={{marginTop:"20px"}}>
                   <img className='img' src={userData.orderQRCode} ></img>
                   <div className='notice'>长按二维码分享好友</div>
                </div>
                

               

                
            </div> 


            <div className='btn'>
            <Button className="success-btn" onClick={() => transferFunc()}>转发</Button>
            <Button className="success-btn" onClick={() => goClickFunc()}>确定</Button>


            </div>
        </div>
    )
}
export default BillingPageSuccess;